<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>登录页面</title>-->
<!--    &lt;!&ndash; 1. bootstrap.css/bootstrap.min.css &ndash;&gt;-->
<!--    <link rel="stylesheet" href="/dev/plugins/bootstrap/css/bootstrap.css">-->
<!--    <style>-->
<!--        #nav_img{-->
<!--            width: 50px;-->
<!--            height: 50px;-->
<!--            border-radius: 50%;-->
<!--            padding: 2px;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<nav class="navbar navbar-inverse" role="navigation">-->
<!--    <div class="container-fluid">-->
<!--        <div class="navbar-header">-->
<!--            <button type="button" class="navbar-toggle" data-toggle="collapse"-->
<!--                    data-target="#example-navbar-collapse">-->
<!--                <span class="sr-only">切换导航</span>-->
<!--                <span class="icon-bar"></span>-->
<!--                <span class="icon-bar"></span>-->
<!--                <span class="icon-bar"></span>-->
<!--            </button>-->
<!--            <a class="navbar-brand" href="#">爱宠之家</a>-->
<!--        </div>-->
<!--        <div class="collapse navbar-collapse" id="example-navbar-collapse">-->
<!--            <ul class="nav navbar-nav navbar-right">-->
<!--                <li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>-->
<!--&lt;!&ndash;                <li><a href="#">admin</a></li>&ndash;&gt;-->
<!--                <li class="active"><a href="#">首页</a></li>-->
<!--&lt;!&ndash;                <li><a href="/dev/views/login.html">注册</a></li>&ndash;&gt;-->
<!--                <li><a href="#">个人中心</a></li>-->
<!--                <li><a href="#">我的订单</a></li>-->
<!--                <li><a href="/dev/views/cart.html"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp; 购物车</a></li>-->
<!--&lt;!&ndash;                <li><a href="#">安全退出</a></li>&ndash;&gt;-->
<!--                <li><img id="nav_img" src="/dev/imgs/ad1.webp"></li>-->
<!--            </ul>-->
<!--        </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 模态框（Modal）-begin &ndash;&gt;-->
<!--    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">-->
<!--        <div class="modal-dialog">-->
<!--            <div class="modal-content">-->
<!--                <div class="modal-header">-->
<!--                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
<!--                    <h4 class="modal-title" id="myModalLabel">用户登录入口-->

<!--                    </h4>-->
<!--                </div>-->
<!--                <div class="modal-body">-->
<!--                    &lt;!&ndash; 登录表单   -begin &ndash;&gt;-->
<!--                    <form class="form-horizontal" role="form">-->
<!--                        <div class="form-group has-feedback">-->
<!--                            <label for="email" class="col-sm-2 control-label">邮箱</label>-->
<!--                            <div class="col-md-8">-->
<!--                                <input type="text" class="form-control" id="email" placeholder="请输入邮箱">-->
<!--                                <span class="form-control-feedback glyphicon glyphicon-envelope"></span>-->
<!--                                <span class="text-danger" id="email_span" style="display: none">sorry,email is not found!</span>-->
<!--                            </div>-->
<!--                            <div class="col-md-2" style="margin-left: -20px;">-->
<!--                                <button type="button" class="btn btn-success" onclick="send_code()">发送验证码</button>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group has-feedback">-->
<!--                            <label for="code" class="col-sm-2 control-label">验证码</label>-->
<!--                            <div class="col-md-8">-->
<!--                                <input type="text" class="form-control" id="code" placeholder="请输入验证码">-->
<!--                                <span class="form-control-feedback glyphicon glyphicon-phone"></span>-->
<!--                                <span class="text-danger" id="code_span" style="display: none">sorry,code is error!</span>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <div class="col-sm-offset-2 col-sm-10">-->
<!--                                <div class="checkbox">-->
<!--                                    <label>-->
<!--                                        <input type="checkbox">记住邮箱-->
<!--                                    </label>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <div class="col-sm-offset-2 col-sm-10">-->
<!--                                <button type="button" class="btn btn-default" onclick="login()">登录</button>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <div class="col-sm-offset-2 col-sm-10">-->
<!--                                <a href="/dev/views/user/register.html">没有账号？立即注册</a>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </form>-->
<!--                    &lt;!&ndash; 登录表单 -end &ndash;&gt;-->
<!--                </div>-->
<!--                <div class="modal-footer">-->

<!--                </div>-->
<!--            </div>&lt;!&ndash; /.modal-content &ndash;&gt;-->
<!--        </div>&lt;!&ndash; /.modal &ndash;&gt;-->
<!--    </div>-->
<!--    &lt;!&ndash; 模态框（Modal）- end &ndash;&gt;-->
<!--</nav>-->


<!--&lt;!&ndash; jquery.min.js文件 - jquery本身是js的框架. bootstrap依赖于jquery框架 &ndash;&gt;-->
<!--<script src="/dev/plugins/jquery/jquery.min.js"></script>-->
<!--&lt;!&ndash; bootstrap.js/bootstrap.min.js &ndash;&gt;-->
<!--<script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>-->
<!--<script>-->
<!--    //登录的按钮的单击事件-->
<!--    function login(){-->
<!--        let email = $("#email").val();-->
<!--        let code = $("#code").val();-->
<!--        let email_span = document.getElementById("email_span");-->
<!--        let code_span = document.getElementById("code_span");-->
<!--        //第二个参数是json对象的格式-->
<!--        $.post('/dev/user',{email:email,code:code},function(res){-->
<!--            if(res.code=="200"){-->
<!--                //登录是成功的-->
<!--                console.log("login-success");-->
<!--                //获取server返回的token-->
<!--                let token = res.data;-->
<!--                //console.log(token-->
<!--                //保存到本地存储中 - H5 - 存储的数据的格式也是key-value的格式-->
<!--                localStorage.setItem("token",token);-->
<!--                window.location='/dev/views/index.html';-->

<!--            }else if(res.code=="404"){-->
<!--                email_span.style.display="";-->
<!--                code_span.style.display="none";-->
<!--            }else{-->
<!--                code_span.style.display="";-->
<!--            }-->
<!--        })-->
<!--    }-->

<!--    //发送验证码的事件-->
<!--    function send_code(){-->
<!--        //1. 获取email文本框输入的邮箱-->
<!--        //js写法-->
<!--        //let email = document.getElementById("email").value;-->

<!--        //jquery写法 - jquery是js的框架-->
<!--        let email = $("#email").val();-->
<!--        //alert(email)-->
<!--        //通过ajax方式 - 将email发送到后端-->
<!--        //发送get请求-->
<!--        //1. 第一个参数是url地址.  参数是?key1=value1&key2=value-->
<!--        //2. 第二个参数是一个函数,函数res,代表的是后端返回过来的结果-->
<!--        //获取邮箱的错误提示的span对象-->
<!--        let email_span = document.getElementById("email_span");-->

<!--        $.get(`/dev/user?email=${email}`,function(res){//jquery会自动将这个json字符串->json对象-->
<!--            //json对象 - 通过json对象.key获取json对象的valu-->
<!--            //if(res.code)-->
<!--            if(res.code=="404"){-->
<!--                //邮箱不存在-->
<!--                //通过js操作样式,让它再次显示出来-->
<!--                email_span.style.display="";-->
<!--            }else{-->
<!--                email_span.style.display="none";-->
<!--                //验证码是发送成功-->
<!--                alert("验证码已经发送到您的邮箱!"+res.data)-->
<!--            }-->
<!--        })-->
<!--    }-->
<!--</script>-->
<!--</body>-->
<!--</html>-->